card-bubble-component@0.1.0で使おうとしたCustom Elementの残骸
途中で書くのがめんどくさくなって止めた
code:js
customElements.define(
"x-userscript-page-card",
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
<style>
:host {
display: block;
position: relative;
height: inherit;
width: inherit;
font-family: var(--card-text-font, "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif);
background-color: var(--card-bg, #fff); box-shadow: var(--card-box-shadow, 0 2px 0 rgba(0,0,0,0.12));
border-radius: 2px;
color: var(--card-title-color, #555); word-break: break-word;
}
a {
text-decoration: none;
}
a:hover {
box-shadow: var(--card-box-hover-shadow, 0 2px 0 rgba(0,0,0,0.23));
}
.hover {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--card-hover-bg, rgba(0,0,0,0.05));
mix-blend-mode: multiply;
z-index: 1;
transition: background-color .1s
}
a:hover .hover {
opacity: 1;
}
.content {
height: calc(100% - 5px);
width: inherit;
display: flex;
flex-direction: column;
overflow: hidden;
text-overflow: ellipsis;
}
.header {
width: 100%;
border-top: var(--card-title-bg, #f2f2f3) solid 10px; padding: 10px 12px;
}
font-size: 14px;
line-height: 20px;
font-weight: bold;
max-height: 60px;
margin: 0;
overflow: hidden;
display: block;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.thumbnail {
display: block;
width: 100%;
margin: 0 auto;
padding: 0 5px;
}
.description {
line-height: 20px;
padding: 10px 12px 0;
font-size: 12px;
white-space: pre-line;
column-count: 1;
column-gap: 2em;
column-width: 10em;
height: inherit;
color: var(--card-description-color, gray);
flex-shrink: 16;
overflow: hidden;
}
</style>
<a type="link">
<div class="hover"></div>
<div class="content">
<div class="header">
<div id="title"></div>
</div>
<div class="thumbnail"><img id="img" /></div>
<div>
</div>
</a>
`;
this.a = shadowRoot.lastElementChild;
}
set path({project, title}) {
this.a.href = https://scrapbox.io/${project}/${toLc(title)};
this.shadowRoot.getElementById('title').textContent = title;
this.a.rel = project === scrapbox.Project.name ? 'route' : 'noopner noreferrer';
this.a.blank = project !== scrapbox.Project.name ? '_blank' : '';
}
set thumbnail(src) {
this.shadowRoot.getElementById('img').src = src;
}
get href() {
return this.a.href;
}
}
);